<!--
 * @Date: 2024-12-20 14:17:42
 * @Author: LiSong
 * @LastEditors: ZHM
 * @LastEditTime: 2025-03-17 10:15:04
 * @Description: 任务项卡片
-->
<template>
  <div class="hp-task-card-item">
    <div class="hp-task-card-item-body">
      <div class="card-body-left">
        <div class="card-icon"
          :style="iconStyle">
          <RkIcon :name="item.icon || 'ele-List'"
            size="32px" />
        </div>
      </div>
      <div class="card-body-right">
        <div class="card-info">
          <div class="card-info-item card-info-label text-over-ellipsis"
            :style="labelStyle">
            <span>{{ item.name || '暂无' }}</span>
          </div>
          <div :class="[
            'card-info-item', 'card-info-value',
            item.path && !design ? 'link' : ''
          ]"
            :style="valueStyle"
            @click="onJumpToMenu(item)">
            <span>{{ itemValue }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router';
import { lightenColor, isEmpty } from '@hp/utils/data.js'
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes';

import { RkIcon } from '@/components/rk-icon/index.js'

const props = defineProps({
  item: { type: Object, default: () => ({}) },
  data: { type: Object, default: () => ({}) },
  design: { type: Boolean, default: true }
})

const itemValue = computed(() => {
  const { item, data } = props
  let value = data[item.field]
  if (isEmpty(value)) {
    return '暂无'
  } else {
    return value
  }
})

// 图标样式
const iconStyle = computed(() => {
  const styleRes = {}
  const { iconColor: color } = props.item
  if (color) {
    styleRes.color = color
    styleRes.backgroundColor = lightenColor(color, 160)
  }
  return styleRes
})
// 文字样式
const labelStyle = computed(() => {
  const styleRes = {}
  const { textColor: color } = props.item
  if (color) {
    styleRes.color = color
  }
  return styleRes
})
// 数据样式
const valueStyle = computed(() => {
  const styleRes = {}
  const { valueColor: color } = props.item
  if (color) {
    styleRes.color = color
  }
  return styleRes
})

const router = useRouter()
const { tagsViewRoutes } = useTagsViewRoutes();
const onJumpToMenu = (item) => {
  const path = item.path
  if (props.design) return
  const route = tagsViewRoutes.find(v => v.path === path)
  if (!route) return
  const { name, redirect, query, meta } = route;
  if (meta?.isLink && !meta?.isIframe) {
    window.open(meta?.isLink)
  } else if (redirect) {
    router.push(redirect)
  } else {
    router.push({
      name,
      query: { ...query },
      state: { wfStatus: item.routeState }
    })
  }
}

</script>

<style lang="scss" scoped>
.hp-task-card-item {
	height: 100%;
	border: 1px solid #ececec;
	border-radius: 5px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	.hp-task-card-item-body {
		flex: 1;
		min-height: 10px;
		display: flex;
		.card-body-left {
			.card-icon {
				width: 60px;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				color: var(--el-color-primary);
				background-color: var(--el-color-primary-light-8);
				margin-right: 15px;
			}
			.card-image {
				width: 60px;
				height: 60px;
				margin-right: 16px;
				img {
					height: 100%;
				}
			}
		}
		.card-body-right {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 0 8px 0 0;
			.card-info-item {
				// text-align: center;
				margin-bottom: 8px;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.card-info-label {
				font-size: 14px;
				font-weight: 500;
			}
			.card-info-value {
				color: var(--el-color-primary);
				font-size: 22px;
				font-weight: 600;
				&.link {
					cursor: pointer;
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
}
</style>